<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <!-- <el-form-item label="真实姓名" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="请输入名字" clearable style="width: 240px" />
        </el-form-item> -->
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择" style="width: 240px" clearable>
            <el-option label="未审核" :value="1" />
            <el-option label="通过" :value="2" />
            <el-option label="驳回" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="getList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <base-page-table :table-data="tableData" :table-columns-data="tableColumnsData" :loading="loading"
      :page-num="queryParams.pageNum" :page-size="queryParams.pageSize" :total="queryParams.total"
      @handleQuery="handleQuery">
      <template #index="scoped">{{ scoped.index + 1 }}</template>
      <template #type="{ row }">
        <span v-if="row.type == 1">到店礼</span>
        <span v-else>补贴券</span>
      </template>
      <template #claimTime="{ row }">{{ row.claimStartTime }} - {{ row.claimEndTime }}</template>
      <template #effectiveTime="{ row }">
        {{ row.effectiveStartTime }} - {{ row.effectiveEndTime }}
      </template>
      <template #status="{ row }">
        <el-tag :type="statues[row.status].name">{{ statues[row.status].status }}</el-tag>
      </template>
      <template #enable="{ row }">
        <el-switch v-model="row.enable" :active-value="1" :inactive-value="2" @change="
          ($event) => {
            handleChange($event, row);
          }
        "></el-switch>
      </template>
      <template #files="{ row }">
        <el-image v-if="row.files?.url" style="width: 100px; height: 100px" :src="row.files?.url" :zoom-rate="1.2"
          :max-scale="7" :min-scale="0.2" :preview-src-list="row.imgs" show-progress :initial-index="1" z-index="9999"
          fit="cover" />
      </template>
      <template #budgetMin="{ row }">{{ row.budgetMin }} - {{ row.budgetMax }}</template>
      <template #handle="scope">
        <el-button link type="primary" :disabled="scope.row.status == 2 || scope.row.status == 3"
          @click="handleAudit(scope.row)">
          处理
        </el-button>
        <!-- <el-button link type="primary">查看详情</el-button> -->
      </template>
    </base-page-table>
    <el-dialog title="申请审核" v-model="dialogVisible" width="600" :before-close="handleClose">
      <el-form :model="formData" ref="formRef" label-width="100px" :inline="false" class="demo-form-inline">
        <el-form-item label="类型">
          {{ types[showForm.type] }}
        </el-form-item>
        <el-form-item label="品类">
          {{ showForm.supportedCategoryText }}
        </el-form-item>
        <el-form-item label="品牌" v-if="showForm.brandText">
          {{ showForm.brandText }}
        </el-form-item>
        <el-form-item label="名称">
          {{ showForm.title }}
        </el-form-item>
        <el-form-item label="券额">
          {{ showForm.amount }}
        </el-form-item>
        <el-form-item label="数量">
          {{ showForm.totalStorage }}
        </el-form-item>
        <el-form-item label="兑换时间">
          {{ showForm.claimStartTime }} - {{ showForm.claimEndTime }}
        </el-form-item>
        <el-form-item label="可用时间">
          {{ showForm.effectiveStartTime }} - {{ showForm.effectiveEndTime }}
        </el-form-item>
        <el-form-item label="申请公司">
          {{ showForm.companyAlias }}
        </el-form-item>
        <el-form-item label="申请时间">
          {{ showForm.createTime }}
        </el-form-item>
        <el-form-item label="是否通过" prop="status" :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }">
          <el-select v-model="formData.status">
            <el-option :value="2" label="通过"></el-option>
            <el-option :value="3" label="驳回"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="auditDesc" label="驳回原因" v-if="formData.status == 3" :rules="{
          required: true,
          message: '填写驳回理由',
          trigger: 'change',
        }">
          <el-input v-model="formData.auditDesc" type="textarea" :rows="4" maxlength="200" />
        </el-form-item>
        <el-form-item label="兑换积分" prop="points">
          <el-input v-model="showForm.points" type="number" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleError(2)">确认</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>

      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getStorageList, auditStorageName, auditEnable } from '@/api/couponStorage'

const loading = ref(false)
const queryParams = reactive({
  keyword: "",
  status: "",
  pageNum: 1,
  pageSize: 10,

});
const tableData = ref([])
const dialogVisible = ref(false)
const formData = ref({
  id: undefined,
  status: 2,
  auditDesc: '',
  points: undefined,
})
const showForm = ref()
const statues = ref({
  0: { name: "primary", status: "待审核" },
  1: { name: "primary", status: "待审核" },
  2: { name: "success", status: "已审核" },
  3: { name: "danger", status: "已驳回" },
});

const formRef = ref(null);
const types = ref({
  1: '到店礼',
  2: '补贴券'
});
const tableColumnsData = ref([
  {
    label: "序号",
    prop: "index",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "index",
    width: 100
  },
  {
    label: "编码",
    prop: "code",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "类型",
    prop: "type",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "type",
  },
  {
    prop: "title",
    label: "名称",
    showOverflowTooltip: true,
  },
  {
    prop: "amount",
    label: "券额",
    showOverflowTooltip: true,
    width: 120
  },
  {
    prop: "claimTime",
    label: "兑换时间",
    showOverflowTooltip: true,
    customSlot: "claimTime",
  },
  {
    prop: "effectiveTime",
    label: "可用时间",
    showOverflowTooltip: true,
    customSlot: "effectiveTime",
  },
  {
    prop: "status",
    label: "状态",
    showOverflowTooltip: true,
    customSlot: "status",
    width: 100
  },
  {
    prop: "totalStorage",
    label: "数量",
    showOverflowTooltip: true,
  },
  // {
  //   prop: "files",
  //   label: "支付凭证",
  //   showOverflowTooltip: true,
  //   customSlot: "files",
  // },
  {
    prop: "enable",
    label: "券状态",
    showOverflowTooltip: true,
    customSlot: "enable",
  },
  {
    prop: "auditDesc",
    label: "驳回理由",
    showOverflowTooltip: true,
  },
  {
    prop: "createTime",
    label: "创建时间",
    showOverflowTooltip: true,
  },
  {
    label: "操作",
    prop: "handle",
    align: "center",
    customSlot: "handle",
    showOverflowTooltip: true,
    fixed: "right",
    width: 200
  }
])

async function getList() {
  loading.value = true
  const res = await getStorageList(queryParams)
  tableData.value = res.data
  queryParams.total = res.total
  loading.value = false
}

function handleResetQuery() {
  queryParams.keyword = ''
  queryParams.status = ''
  queryParams.pageNum = 1
  queryParams.pageSize = 10
  getList()
}

function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  getList();
}

const handleAudit = (row) => {
  dialogVisible.value = true
  formData.value.id = row.id
  showForm.value = row
};

const handleClose = () => {
  dialogVisible.value = false;
  formData.value.auditDesc = "";
  formRef.value?.resetFields();
};


function handleError() {
  console.log(formData.value);
  formRef.value.validate((valid) => {
    if (valid) {
      dialogVisible.value = false
      funcAuditRealName(formData.value);
    } else {
      console.log("error submit!!");
    }
  });
}

async function handleChange(statues, data) {
  console.log(statues, data);
  try {
    const datas = {
      id: data.id,
      enable: statues,
    };
    await auditEnable(datas);
    ElMessage.success("操作成功");
    getList();
  } catch (e) { }
  // couponStorage/enable
}

//审核
const funcAuditRealName = async (params) => {
  try {
    const res = await auditStorageName(params);
    getList();
    ElMessage.success("审核完成");
    handleClose()
  } catch (err) {
    console.log(err);
  } finally {
  }
};

onMounted(() => {
  getList()
})
</script>
